<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 200px;width: 200px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"   src="jquery/jquery-1.4.4.js"></script>

<script type="text/javascript">
/*LOCAL*/  

/*GLOBAL OBJ*/
/*the map*/
var map;
var geocoder;

/*a spatial point*/
var Geopoint=function(lat, lng){
	this.lat=lat;
	this.lng=lng;  
	this.isDrawable=function(){
		return (this.lat!=null && this.lng!=null);
		};
}

/*the itinerary geopoints*/
var Itinerary=function(departure, arrival){
	this.dept= departure;
	this.arrival= arrival;
}


var itineraryMarkers={

	markers: [],
	deptPosition:"",
	arrPosition:"",
	
		
	findMarkerIdx:function(ggMark){		
		for(i=0; i<markers.length; i++){
			if(markers[i].getPosition().lat()=== ggMark.getPosition().lat() && markers[i].getPosition().lng()=== ggMark.getPosition().lng()){
				return i;
			}
		}
	},
	
	addMarker:function(ggMark, type, selected){
		/*aggiungo al marker una property per identificare il tipo di marker*/
		ggMark.addrType=type;
				
		alert(ggMark.addrType);	
		this.markers.push(ggMark);
		if(selected && type=="dept"){
			this.deptPosition=ggMark.getPosition();
		}else if(selected && type=="arr"){
			this.arrPosition=ggMark.getPosition();
		}
	},
	
	addMarkers:function(ggMarks, type){
		for(i=0;i<ggMarks.length, i++;){
			this.addMarker(ggMarks, type, false);
		}		
	},
	
	removeMarkers:function(type){
		var keep=[];
		for(i=0;i<this.markers.size;i++){
			if(! this.markers[i].addrType==type){
				keep.push(this.Markers[i]);
			}
		}
		this.markers=keep;
	}	
}





/*an itinerary marker on the map*/
var IntineraryMarker=function(marker, type ){
	this.marker= marker;
	this.type=type; 
	this.selected= false;
	
	this.isSelected=function(){
		return selected;	
	}
	
	this.setSelected=function(selected){
		this.selected=selected;	
	}
	
	this.isDeparture= function(){
		return (this.type!=null && this.type==="dept");
	}	
	
	this.isArrival= function(){
		return (this.type!=null && this.type==="arr");
	}
}

/*
************
************
	INITIALIZER*/

$(function(){
	/*init geocoding service*/
	geocoder = new google.maps.Geocoder();
	
	/*Init gmap*/
	var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);      
	
	/*bind btn evt for coding address*/
	$("#ity input[type=button]").bind("click", function(event) {
		processAddress(event);} );	
		
	
	 
		
								
});
  
/*search address, display marks on map*/
function processAddress(firedEvent){
	var btName= $(firedEvent.target).attr("name");	
	var addrType="";
	if (btName.indexOf("dept", 0)!=-1 ){
		addrType="dept";
	}else if(btName.indexOf("arr", 0)!=-1){
		addrType="arr";
	}
	
	var addressInput= $('input[type="text"][name$="'+btName.concat(":val")+'"]');
	var addressVal= $(addressInput).val();
	
	var results= codeAddress(addressVal);
	
	createMarkers(results, addrType);
	
}

function createMarkers(results, addrType){
	/*create markers*/				
	for(i=0;i<results.length;i++){
		var marker = new google.maps.Marker({
			map: map, 
			position: results[i].geometry.location
	  		});
	  		
	  		/*bind click event on markers*/
		google.maps.event.addListener(marker, 'click', function() {
			alert("hi "+i);
			alert("position lat" +marker.getPosition().lat());
		});
		
		itineraryMarkers.addMarker(marker, addrType, i==0);
	
	}
	if(results.length>1){
		$("#ity").after($("<div style='height:10px;'>select a origin trip</div>"));
	}

}
 
  
/*GMAP REQUEST GEOCODING ADDRESS*/
function codeAddress(address){
	
	if(address!=null && address.size!=0){
		var toRet;		
		/*geocoding request*/		
		geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				toRet=results;
				//set default center
				map.setCenter(results[0].geometry.location);		
			
			/*bad status*/
			}else {
	        	alert("Geocode was not successful for the following reason: " + status);
			}
    	});		
	}
	return toRet ; 
}  
  
  	
	function testItinerary(){
		var arrival= new Geopoint(-34.397, 150.644);
		var departure= new Geopoint(-34.297, 150.744);
		var myItinerary= new Itinerary(arrival, departure);
		var val="<div> dept lat:"+myItinerary.dept.lat+"</div>";
		$("#first").after(val);
		val="<div> arrival lat: "+myItinerary.arrival.lat +"</div>";
		$("#first").after(val);
		val="<div> arrival lng: "+myItinerary.arrival.lng+"</div>";
		$("#first").after(val);
		
		if(myItinerary.dept.isDrawable()){
			alert('draw');
		}else{
		alert('no');
		}
		
		
	
	}
  
	
	</script>
 

</head>
<body >
  <div id="ity">
     <div>
		<span>departure</span><input title="departure" name="ity:dept:val" type="text" value="Sydney, NSW">
		<input name="ity:dept" type="button" value="search" > 		
	</div>	
	<div>
		<span>arrival</span><input title="arrival" name="ity:arr:val" type="text" value="Sydney, NSW">
		<input  name="ity:arr" type="button" value="search" > 		
	</div>	
  </div>
  <div id="addr:gg">addresses</div>
  <div id="map_canvas" style="width:400px; height:400px; float:left; clear: right;"></div>
</body>
</html>